import 'scss/battle.scss'
import Monster from 'core/monster'
import React from 'react'

export default React.createClass({
    getInitialState() {
        let monster = new Monster(320001)
        console.log(window.player.fightAttri)
        console.log(monster.fightAttri)
        return { player: window.player.fightAttri, monster: monster.fightAttri }
    },
    componentDidMount() {
        let self = this
        let monster = this.state.monster
        this.timer = setInterval(function () {
            if (monster.hp > 0) {
                monster.hp += monster.recover
                if (monster.hp > monster.maxHp) {
                    monster.hp = monster.maxHp
                }
                self.setState({ monster: monster })
            } else {
                clearInterval(self.timer)
                self.timer = null
            }
        }, 1000);
    },
    componentWillUnmount() {
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null;
        }
    },
    normalAttack() {
        let player = this.state.player, monster = this.state.monster
        let damage = this.calcDamage(player, monster)
        monster.hp -= damage
        this.setState({ monster: monster })
        damage = this.calcDamage(monster, player)
        player.hp -= damage
        this.setState({ player: player })
    },
    calcDamage(attacker, defender) {
        let damage = parseInt(attacker.attack * attacker.attack / (defender.defend + attacker.attack))
        return damage
    },
    render() {
        let player = this.state.player, monster = this.state.monster
        return <div id='battle'>
            <div className="flex">
                <button onClick={this.normalAttack}>普通攻击</button>
                <button>加血</button>
                <button>强化</button>
                <button>猛击</button>
            </div>
            <div className="playerInfo">
                <div>生命:{player.hp}/{player.maxHp}</div>
                <div>魔法:{player.mp}/{player.maxMp}</div>
            </div>
            <div className="enemy">
                <div>生命:{monster.hp}/{monster.maxHp}</div>
            </div>
            <div className="msg">

            </div>
        </div>
    }
});

